<template>
    <el-dialog :visible.sync="addShow" width="670px" class="exam" @close="close">
        <div slot="title" class="dialog-title">
            <div class="box box-align-center box-pack-start">
                <i class="tips"></i>
                <span>添加试卷</span>
            </div>
        </div>
        <el-col class="paper-list" v-loading="loading" v-show="state == 1">
            <el-col v-if="page.list.length !=0 ">
                <el-radio-group v-model="examid">
                    <el-radio :label="item.id" v-for="(item,index) in page.list" :key="index">
                        <el-col class="list box box-align-center box-pack-between">
                            <el-col :span="8" class="left h100 box box-tb box-align-start box-pack-center">
                                <h2>{{item.name}}</h2>
                                <span class="mt10"
                                    style="color: #888F9F;font-size: 15px;">{{`${item.createusername}创建于`+$moment(item.createtime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                            </el-col>
                            <el-col :span="8" class="h100 box box-tb box-align-center">
                                <el-col class="box box-pack-end">
                                    <div class="divider">
                                        <span>{{item.danxuancnt!=null?item.danxuancnt:0}}单选</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>{{item.duoxuancnt!=null?item.duoxuancnt:0}}多选</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>{{item.panduancnt!=null?item.panduancnt:0}} 判断</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>总分 {{item.score!=null?item.score:0}}</span>
                                    </div>
                                </el-col>
                            </el-col>
                        </el-col>
                    </el-radio>
                </el-radio-group>

            </el-col>
            <el-col v-else>
                <el-empty></el-empty>
            </el-col>
        </el-col>
        <el-col v-show="state == 2">
            <el-form :model="form" ref="form" :rules="rules">

                <el-form-item label="答题时长" :label-width="formLabelWidth" v-show="form.type == 2?true:false">
                    <el-radio-group v-model="form.time">
                        <el-radio :label="1">
                            <el-input-number v-model="form.num" size="small" :step="5" controls-position="right"
                                @change="handleChange" :min="10" :max="200" class="mr10"></el-input-number>分钟
                        </el-radio>
                        <el-radio :label="2">不限时长</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="开放时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </el-col>
        <span slot="footer" class="dialog-footer">
            <el-button type="text" @click="goPaper()" class="return-btn" v-show="state != 2">没有想用的试卷？<em>新建试卷</em>
            </el-button>
            <el-button type="primary" @click="state = 2" class="pub-btn" v-show="state != 2">下一步</el-button>
            <el-button type="text" @click="state = 1" class="return-btn" v-show="state == 2">上一步</el-button>
            <el-button type="primary" @click="handleConfirm()" v-show="state == 2" class="pub-btn">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            show: {
                type: Boolean
            },
            couslistid:{},
            paperType:{},
            cousid:{},
            stageid:{}
        },
        data() {
            return {
                papertype:this.paperType,
                addShow: this.show,
                loading: false,
                page: {
                    pageNum: 1,
                    pageSize: 1000,
                    list: []
                },
                selectVal: null,
                schoolid: this.$store.state.schoolId,
                state: 1,
                examid:null,
                form: {
                    type: 2,
                    num: 1,
                    date: ''
                },
                rules: {
                    num: [{
                        required: true,
                        message: '请选择时长',
                        trigger: 'change'
                    }],
                    date: [{
                        type: 'array',
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                    }],
                },
                formLabelWidth: '120px',
                title: '新建考试',
            }

        },
        watch: {
            show: {
                handler(newVal, oldVal) {
                    this.addShow = newVal
                },
                deep: true,
                immediate: true
            },
            paperType:{
                handler(newVal, oldVal) {
                    this.papertype = newVal
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            getData() {
                this.loading = true;
                let url = '/yexam/pagelist';
                let params = {
                    schoolid: this.schoolid,
                    searchtext: this.searchVal,
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize
                };
                // console.log(params);
                this.$ajax.post(url, params).then(res => {
                    console.log(res.page.list);
                    this.loading = false;
                    if (res.code == 0) {
                        this.page = res.page
                    }
                })
            },
            close() {
                this.$emit('close')
            },
            handleChange(value) {
                console.log(value);
            },
            handleConfirm() {
                console.log(this.papertype);


                let url = '/couslistexam/save';
                let params;
                if(this.papertype == 1){
                    params = {
                        couslistid:this.couslistid,
                        cousid:this.cousid,
                        stageid:this.stageid,
                        examid:this.examid
                    };
                }else{
                     params = {
                        couslistid:this.couslistid,
                        cousid:this.cousid,
                        // stageid:0,
                        examid:this.examid
                    };
                }
                console.log(params);
                // return
                this.$ajax.post(url,params).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.stageList = res.list;
                        this.addShow = false
                        this.$message.success('添加成功')
                        this.$emit('listCousSatge')
                    } else {
                        this.$message.error('请求失败！');
                    }
                })

            },
            goPaper() {
                this.addShow = false
                this.$router.push('/create_paper')
            }
        },
    }
</script>

<style scoped lang="scss">
    /deep/ .el-radio {
        box-sizing: border-box;
        margin: 10px 0;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 6px;
    }

    .paper-list {
        height: 550px;
        overflow-y: auto;
        background-color: #F7F9FD;

        /*滚动条样式*/
        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }

        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);

        }


        .list {
            box-sizing: border-box;
            padding: 10px 20px;
            height: 70px;
            margin: 10px 0;

            h2 {
                font-size: 20px;
            }

            .h100 {
                height: 100%;
            }

            .divider {
                font-size: 14px;
            }

            i {
                font-size: 28px;
            }
        }

        .left {
            font-size: 16px;
        }
    }


    /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #565DFF;
        background: #565DFF;

        &:hover {
            border-color: #565DFF;
        }
    }

    /deep/ .el-radio__input.is-checked+.el-radio__label {
        color: #606266;
    }

    /deep/ .el-radio__inner:hover {
        border-color: #565DFF;
    }

    /deep/ .el-input__inner:focus {
        border-color: #565DFF;
    }

    /deep/ .re-input .el-input__inner {
        border-radius: 5px;
        border-color: #D0D4E2;
        // &:hover{
        //     border-color: #565DFF !important;
        // }
    }

    /deep/ .re-input .el-input__inner:focus,
    .re-input.el-select .el-input.is-focus .el-input__inner {
        border-color: #565DFF !important;
    }

    //时间修改
    /deep/ .el-range-editor.is-active,
    .el-range-editor.is-active:hover {
        border-color: #565DFF;
    }

    .return-btn {
        color: #ABB0C4;

        &:hover {
            color: #000;
        }
    }



    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }

    .item {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;

        &:hover {
            color: #4852EC;
            background-color: #F0F3F8;
        }
    }

    /deep/ .el-form .el-form-item:last-child {
        margin-bottom: 0;
    }

    .return-btn {
        color: #ABB0C4;

        &:hover {
            color: #000;
        }
    }


    .tips {
        margin-right: 5px;
        width: 4px;
        height: 18px;
        background: #626BF1;
        border-radius: 2px;
    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }
</style>
